<template>
  <div>
    <page-banner v-if="showBanner && bannerPosition==='top'" ref="pageBanner" :banner-setting="bannerSetting" />
    <div>
      <table-filter
        ref="tableFilter"
        is-in-template
        :query="filter"
        :query-rows="queryRows"
        :enable-full-search="fullTextSearch"
        :search-type.sync="searchType"
        :search-text.sync="searchText"
        :grid-info="gridInfo"
        @search="handleSearch"
        @reset="handleSearch"
      />
      <div class="filter-wraper">
        <table-operate is-in-template :btns="toolbarBtns" :show-back="showBack">
          <template v-if="showBack" #back="{size}">
            <span class="btn-wraper">
              <el-button type="primary" :size="size" icon="el-icon-back" @click="goBack">返回</el-button>
            </span>
          </template>
        </table-operate>
      </div>
      <div class="left-container">
        <custom-tab
          :active-tab.sync="activeTab"
          :data="tabData"
          :tab-info="tabInfo"
          :total="tabTotal"
          :totals="tabTotals"
          @node-click="handleTabClick"
        />
      </div>
      <lb-table
        v-loading="listLoading"
        v-bind="tableAttr"
        :column="tableColumn"
        :data="tableData"
        :table-info="tableInfo"
        :grid-info="gridInfo"
        :personalization="personalization"
        :btns="tableBtns"
        :pagination="enablePaging"
        background
        border
        is-template
        fixed-heigth
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="pageSizes"
        :current-page.sync="currentPage"
        :total="total"
        :page-size="pageSize"
        :default-sort="defaultSort"
        @size-change="handleSizeChange"
        @p-current-change="handleCurrentChange"
        @sort-change="handleSortChange"
      />
      <page-banner v-if="showBanner && bannerPosition==='bottom'" ref="pageBanner" :banner-setting="bannerSetting" />
    </div>
  </div>
</template>

<script>
import main from './mixins/main'
import tab from './mixins/tab'
import table from './mixins/table'
import filter from './mixins/filter'
import banner from './mixins/banner'
import {
  getDic
} from '@/admin/utils/index'
export default {
  name: 'Tem1120',
  mixins: [main, tab, filter, table, banner],
  data() {
    return {}
  },
  mounted: function() {
    // 从码表中获取数据
    if(this.treeInfo.codeDataSource){
      this.tabData = getDic(this.treeInfo.codeDataSource).map(i=>{
        i.TREE_UNION_NAME = i.name
        return i
      })
      console.log(this.tabData)
      this.$store.commit('page/SET_TREES', this.tabData)
      // 获取第一个tab
      let keyField = this.keyField || 'code'
      if(this.tabInfo.defaultSelect){
        this.currentTab = this.tabData.find(i=>i[keyField] == this.tabInfo.defaultSelect)
        this.activeTab = 'tab_' + this.currentTab[keyField]
        this.$store.commit('page/SET_CURRENTTREE', this.currentTab)
      }else if (this.tabData.length) {
        this.currentTab = this.tabData[0]
        this.activeTab = 'tab_' + this.currentTab[keyField]
        this.$store.commit('page/SET_CURRENTTREE', this.currentTab)
      }
      this.getList()
    }else{
      this.gettabData().finally(() => {
        this.getList()
      })
    }
  },
  methods: {
    onActivated: function() {
      this.$store.commit('page/SET_CURRENTTREE', this.currentTab)
      this.getList()
    },
    handleTabClick(data, node) {
      console.log(data)
      this.currentPage = 1
      this.$store.commit('page/SET_CURRENTTREE', data)
      this.emitTabclick({ data, node })
      this.currentTab = data
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .form-operate{
  display: inline-block;
  margin-right: 10px;
}
::v-deep .el-tabs__item{
  font-size: 16px;
}
</style>
